/*
 * @Author: xueyp
 * @Date: 2020-06-10 16:54:29
 * @Last Modified by: xueyp
 * @Last Modified time: 2020-06-10 21:56:12
 * @description: 猫头上的气泡
 */
<template>
  <div v-show="popoverShow" class="popover" :style="bgStyle">
    <div class="popover-text" >
      {{pageData.start_at_hour}}:{{pageData.start_at_minute}}-次日{{pageData.end_at_hour}}:{{pageData.end_at_minute}}可睡觉赚颜值，每晚可赚{{pageData.face_point}}颜值
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      timer: null
    };
  },
  props:{
    pageData:{
      start_at_hour: {
        type: [Number, String],
        default: '00'
      },
      start_at_minute: {
        type: [Number, String],
        default: '00'
      },
      end_at_hour: {
        type: [Number, String],
        default: '00'
      },
      end_at_minute: {
        type: [Number, String],
        default: '00'
      }
    }
  },
  created() {
    this.timeDisplay();
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    ...mapMutations({
      controlPopover: 'CONTROL_POPOVER'
    }),
    timeDisplay() {
      this.controlPopover({'popoverShow': true})
      // setTimeout(() => {
      //   this.controlPopover({'popoverShow': false})
      // }, 10000)
    }
  },
  computed: {
    ...mapState({
      timeState: "timeState",
      popoverShow: "popoverShow"
    }),
    bgStyle() {
      const style = {
        bottom: "6.6rem"
      };
      return style;
    }
  }
};
</script>

<style scoped lang="less">
.popover {
  position: absolute;
  left: 0.24rem;
  // bottom: 5.19rem; // 晚上
  // bottom: 5.69rem; // 早上
  width: 4.13rem;
  height: 1.16rem;
  background-image: url(../../assets/images/tipBg.png);
  background-repeat: no-repeat;
  // background-position: center center;
  // background-attachment: fixed;
  background-size: cover;
  .popover-text {
    font-size: 0.24rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(141, 50, 20, 1);
    line-height: 0.3rem;
    margin: 0.2rem;
  }
}
</style>
